<template>
  <div class="dh-field">
    <div class=" van-hairline--bottom">
      <van-field
        v-model="value"
        :readonly="readonly"
        v-bind="$attrs"
        :is-link="$attrs.disabled === undefined"
        clickable
        name="calendar"
        input-align="left"
        error-message-align='left'
        class="dh-cell"
        @click="show = true"
      />
      <van-calendar :min-date="minDate" :max-date="maxDate" v-model="show" :show-confirm="false" @confirm="onAddCalConfirm">
        <template slot="footer">
          <div class="btns">
            <van-button class="filter-time_btn" type="info" @click="onCancelCalendar">清空</van-button>
          </div>
        </template>
      </van-calendar>
    </div>
  </div>
</template>

<script>
export default {
  name: "VanCalendarInput",
  props: {
    readonly: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: ''
    },
    minDate: {
      type: Date,
      default: () => {
        let time = new Date()
        time.setFullYear(time.getFullYear() - 10)
        return new Date(time)
      }
    },
    maxDate: {
      type: Date,
      default: () => {
        let time = new Date()
        time.setFullYear(time.getFullYear() + 10)
        return new Date(time)
      }
    }
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    onAddCalConfirm (date) {
      this.show = false
      this.$emit("confirm", date)
    },
    onCancelCalendar () {
      this.show = false
      this.$emit("cancel")
    }
  }
}
</script>

<style scoped>
.btns .filter-time_btn {
  margin-bottom: 20px;
  width: 100%;
}
</style>
